<template>
  <!-- 检查合格(合格)--PDF页面 -->
  <div class="inspectPdf">
    <div class="pdf-btn" @click="htmlToPdf">下载</div>
    <div class="back-btn" @click="$router.back()">返回</div>

    <div class="matterList page">
      <div class="right-title">{{ content.policeAgencyName }}</div>

      <div class="recordTable">
        <div class="nameTitle">{{ content.documentName }}</div>
        <div class="details-table detailModal" style="white-space: pre-wrap" v-html="content.content"></div>

        <div class="books-article">
          <div v-if="!isFromCountn" class="books-article-left">
            <div>单位/社区:</div>

            <div>法人/负责人:</div>
          </div>
          <div v-else class="books-article-left">
            <div style="margin-top: 0">
              单位/社区: <span class="singCompanyName"> {{ content.companyName }}</span>
            </div>

            <div>法人/负责人: <img :src="imgPrefix + content.companySignatureUrl" class="sign-image" mode="" /></div>
          </div>

          <div class="books-article-right">
            <div class="img">派出所公章:</div>
            <div v-if="isFromCountn" class="date">
              {{ content.createTime.slice(0, 4) }} 年 {{ content.createTime.slice(5, 7) }} 月
              {{ content.createTime.slice(8, 10) }} 日
            </div>
            <div v-else class="date">
              年&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 月&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 日
            </div>
            <img :src="imgPrefix + content.policeSealUrl" class="seal-image" mode="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAction } from '@/api/manage'
import { findEnableDictItemsbyCode } from '@/api/api'
import { addHtmlStyleProps, removeHtmlStyleProps } from '../../utils/util'

export default {
  name: 'qualifiedPdf',
  data() {
    return {
      imgPrefix: '',
      // policeCheckTaskInfo: {},
      content: {},
      isFromCountn: false,
    }
  },
  created() {
    this.getImagePrefix()
    if (this.$route.query.content) {
      this.isFromCountn = true
      this.content = { ...this.$route.query }
    } else {
      this.getDetailList()
    }
  },
  mounted() {
    addHtmlStyleProps()
    document.getElementsByClassName('ant-layout-header')[0].style.display = 'none'
    document.getElementsByClassName('ant-layout-footer')[0].style.display = 'none'
  },
  methods: {
    htmlToPdf() {
      document.head.getElementsByTagName('title')[0].innerText =
        this.content.documentName + '-' + (this.content.fileName || this.content.versionName)
      window.print()
    },
    async getDetailList() {
      let {
        result: { records },
      } = await getAction('/sys/document_version/page', { id: this.$route.query.id })
      this.content = records[0]
      console.log(this.result, 'res')
    },
    getImagePrefix() {
      findEnableDictItemsbyCode({ code: 'static_server' }).then((res) => {
        this.imgPrefix = res.result[0].value
      })
    },
  },
  destroyed() {
    removeHtmlStyleProps()
    document.getElementsByClassName('ant-layout-header')[0].style.display = 'block'
    document.getElementsByClassName('ant-layout-footer')[0].style.display = 'block'
  },
}
</script>

<style lang="less" scoped>
.recordTable {
  font-size: 18px;
}

.details-table {
  margin: 0 50px;
}

.books-article {
  // padding: 0 10px;
  // color: #848484;
  // font-size: 16px;
  // font-weight: 500;
  padding: 0 60px;
  height: 200px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;

  // .books-article-left > div {
  //   margin-top: 40px;
  // }

  .books-article-right {
    position: relative;
    display: flex;
    flex-direction: column;
    // justify-content: flex-end;

    .img {
      margin: 0 0 50px 0;
      z-index: 1;
    }
    .date {
      text-align: right;
      z-index: 1;
    }
    img {
      position: absolute;
      width: 200px;
      height: 200px;
      transform: translateY(-50px);
      top: 0;
      right: 0;
    }
  }

  .singCompanyName {
    font-weight: bold;
    color: #333333;
  }
  .sign-image {
    width: 200px;
    height: 100px;
  }
}
</style>
